Performance optimization Angular অ্যাপ্লিকেশন এবং Highcharts চার্টে গুরুত্বপূর্ণ। বড় এবং জটিল অ্যাপ্লিকেশনগুলির জন্য minification এবং bundling ফিচারগুলি ব্যবহারের মাধ্যমে কোডের আকার কমানো এবং অ্যাপ্লিকেশন লোডিং স্পিড উন্নত করা সম্ভব।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts এর সাথে minification এবং bundling অপ্টিমাইজেশন করতে হয়।

Minification কী?

Minification হল একটি প্রক্রিয়া যেখানে কোডের অপ্রয়োজনীয় অংশ যেমন সাদা স্পেস, কমেন্ট, নতুন লাইন, এবং দীর্ঘ ভ্যারিয়েবল নামগুলি সরিয়ে কোডের আকার কমানো হয়। এতে অ্যাপ্লিকেশন দ্রুত লোড হয় এবং সার্ভারের জন্য ট্রাফিক কমে যায়। Angular প্রকল্পে, এটি ডিফল্টভাবে প্রোডাকশন বিল্ডের অংশ হিসেবে অন্তর্ভুক্ত থাকে।

Bundling কী?

Bundling হল একাধিক স্ক্রিপ্ট বা ফাইলকে একটি বা কয়েকটি ফাইলে একত্রিত করা। এর ফলে ওয়েব অ্যাপ্লিকেশন কম ফাইলের মাধ্যমে লোড হতে পারে, যা ব্যান্ডউইথ সাশ্রয় করে এবং লোড টাইম কমায়। Angular CLI এর মাধ্যমে bundling খুবই সহজ।

Angular এ Minification এবং Bundling কীভাবে কাজ করে?

Angular CLI আপনাকে ng build --prod কমান্ড ব্যবহার করে প্রোডাকশন বিল্ড তৈরি করতে দেয়, যা ডিফল্টভাবে minification এবং bundling করে। এটি Angular অ্যাপ্লিকেশনকে অপ্টিমাইজ করতে সাহায্য করে।

স্টেপ 1: ng build --prod কমান্ড ব্যবহার করা

প্রোডাকশন বিল্ড তৈরি করতে, আপনাকে Angular CLI এর --prod ফ্ল্যাগ সহ ng build কমান্ডটি চালাতে হবে। এটি minification, bundling, এবং অন্যান্য পারফরম্যান্স অপ্টিমাইজেশন কার্যক্রম সম্পাদন করবে।

ng build --prod

এটি আপনার প্রজেক্টের dist/your-project-name ফোল্ডারে একটি প্রোডাকশন গ্রেড বিল্ড তৈরি করবে। এখানে সব কোড minified এবং bundled হবে।

স্টেপ 2: Angular Configuration এর মাধ্যমে Minification এবং Bundling কনফিগার করা

Angular CLI এর angular.json ফাইলের মাধ্যমে আপনি কিছু কনফিগারেশন সেট করতে পারেন, যা minification এবং bundling এর আচরণ পরিবর্তন করতে পারে।

angular.json ফাইলে আপনি নিচের কনফিগারেশন দেখতে পাবেন:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true,  // Minification সক্রিয় করা
              "outputHashing": "all",  // ফাইলের নামের সাথে হ্যাশ যোগ করা
              "sourceMap": false,  // প্রোডাকশন পরিবেশে Source maps নিষ্ক্রিয় করা
              "extractCss": true,  // CSS আলাদাভাবে এক্সট্র্যাক্ট করা
              "fileReplacements": [],
              "vendorChunk": false,  // Vendor chunk তৈরি করা
              "buildOptimizer": true  // Angular build অপটিমাইজার সক্রিয় করা
            }
          }
        }
      }
    }
  }
}

কনফিগারেশন ব্যাখ্যা:

• optimization: এই অপশনটি minification এবং কোড অপটিমাইজেশন সক্রিয় করে।
• outputHashing: এটি ফাইলের সাথে একটি হ্যাশ যোগ করে, যাতে ব্রাউজার ক্যাশিং এর মাধ্যমে স্ট্যাটিক ফাইলগুলি নতুন সংস্করণে আপডেট হয়।
• sourceMap: প্রোডাকশন পরিবেশে সোর্স ম্যাপগুলি নিষ্ক্রিয় করে, যা অ্যাপ্লিকেশনের আকার কমাতে সাহায্য করে।
• extractCss: এটি CSS ফাইলগুলোকে আলাদাভাবে এক্সপোর্ট করতে সাহায্য করে, যা আরও দ্রুত লোড হতে সহায়ক।
• vendorChunk: Angular এর সমস্ত ভেন্ডর লাইব্রেরি (যেমন RxJS, Highcharts ইত্যাদি) একত্রে vendor.js ফাইলে ব্যান্ডলিং করবে।
• buildOptimizer: এটি Angular কোডকে আরও অপ্টিমাইজ করে।

স্টেপ 3: Highcharts এর জন্য Optimization

Highcharts ব্যবহার করার সময়, আপনি বিভিন্নভাবে পারফরম্যান্স অপ্টিমাইজ করতে পারেন:

1. Highcharts Boost Module: Highcharts Boost মডিউলটি বড় ডেটাসেটের সাথে কাজ করার সময় পারফরম্যান্স বৃদ্ধি করতে সাহায্য করে। এটি শুধুমাত্র ক্যানভাস রেন্ডারিং ব্যবহার করে, যা চার্ট রেন্ডারিংয়ের গতিকে দ্রুত করে।

   Boost মডিউল সক্রিয় করা:

   import * as Highcharts from 'highcharts';
   import Boost from 'highcharts/modules/boost';
   
   Boost(Highcharts); // Boost মডিউল সক্রিয় করা
   

2. Lazy Loading: Highcharts চার্টের জন্য Lazy Loading ব্যবহার করুন, যাতে নির্দিষ্ট সময় বা ইউজার ইন্টারঅ্যাকশন এর মাধ্যমে চার্ট লোড হয়। এটি অ্যাপ্লিকেশনের প্রথম লোড সময় কমাতে সাহায্য করবে।
3. Data Reduction: Highcharts এ যদি ডেটা অনেক বেশি থাকে, তবে data reduction বা ডেটা সংক্ষেপণ টেকনিক ব্যবহার করুন। আপনি dataGrouping অপশনটি ব্যবহার করতে পারেন, যাতে অধিক ডেটা একত্রিত হয়ে একটি ছোট সেগমেন্টে পরিণত হয়।

স্টেপ 4: Production Build পরবর্তী Performance পরীক্ষণ

আপনার অ্যাপ্লিকেশনের পারফরম্যান্স পরীক্ষণের জন্য বিভিন্ন টুল ব্যবহার করতে পারেন:

• Lighthouse: এটি গুগলের একটি টুল যা অ্যাপ্লিকেশনের পারফরম্যান্স, অ্যাক্সেসিবিলিটি, SEO, এবং আরও অনেক বিষয় বিশ্লেষণ করে।
• Chrome DevTools: DevTools এর Performance Tab ব্যবহার করে আপনি অ্যাপ্লিকেশনের লোড টাইম এবং পারফরম্যান্স বিশ্লেষণ করতে পারেন।

সারাংশ

Highcharts এর সাথে Angular অ্যাপ্লিকেশনের minification এবং bundling অপ্টিমাইজেশন আপনার অ্যাপ্লিকেশনকে দ্রুত লোড হতে সহায়তা করে এবং পারফরম্যান্স উন্নত করে। Angular CLI এর --prod ফ্ল্যাগ ব্যবহারের মাধ্যমে আপনি এই অপ্টিমাইজেশনগুলো স্বয়ংক্রিয়ভাবে প্রযোজ্য করতে পারেন। Highcharts এর Boost মডিউল, Lazy Loading এবং ডেটা সংক্ষেপণের মাধ্যমে আপনি বড় ডেটাসেটের সাথে কাজ করার সময় পারফরম্যান্স আরও বাড়াতে পারেন। Minification এবং Bundling অ্যাপ্লিকেশনের আকার কমিয়ে লোড টাইম এবং ব্যান্ডউইথ সাশ্রয় করতে সহায়ক।